<template>
    <div class="_container " style="width: 100%">
      <n-tabs class="resource-tabs" type="line" animated tabs-padding="30">
        <n-tab-pane name="model" tab="AI大模型资源">
          <ai-model></ai-model>
        </n-tab-pane>
        <n-tab-pane name="embedding" tab="Embedding模型资源">
          <embedding></embedding>
        </n-tab-pane>
        <n-tab-pane name="vdb" tab="VDB向量数据库资源">
          <vdb></vdb>
        </n-tab-pane>
        <n-tab-pane name="fun" tab="Function资源">
          <function-call></function-call>
        </n-tab-pane>
      </n-tabs>
    </div>
</template>

<script setup>
import { NTabs } from "naive-ui"
import { NTabPane } from "naive-ui"
import AiModel from "./components/ai-model/index.vue"
import Embedding from "./components/embedding/index.vue"
import Vdb from "./components/vdb/index.vue"
import FunctionCall from "./components/function-call/index.vue"


</script>

<style lang="scss" scoped>
.resource-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;

  :deep(.n-tabs-nav) {
    flex-shrink: 0;
  }

  :deep(.n-tabs-pane-wrapper) {
    flex: 1;
    height: 100%;
  }

  :deep(.n-tab-pane) {
    height: 100%;
  }
}
</style>